import 'package:all_in_onedemo/main.dart';
import 'package:flutter/material.dart';

class FlowLayoutRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FlowLayoutRouteState();
  }
}

class _FlowLayoutRouteState extends State<FlowLayoutRoute>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  List tabs = [
    'news',
    'history',
    'pictures',
    'FGO',
    '360',
    'OnePlus',
    'Apple',
    'Xiaomi',
    'OPPO',
  ];

  void initState() {
    super.initState();
    _tabController = TabController(
      length: tabs.length,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: Icon(
            Icons.power_settings_new,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
        drawer: FlowDrawer(),
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          shape: CircularNotchedRectangle(),
          child: Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              SizedBox(),
              IconButton(
                icon: Icon(Icons.business),
                onPressed: () {},
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceAround,
          ),
        ),
        appBar: AppBar(
          leading: Builder(
            builder: (context) => IconButton(
                  icon: Icon(Icons.dashboard),
                  color: Colors.white,
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                ),
          ),
          bottom: //TO DO:,
              TabBar(
            controller: _tabController,
            tabs: tabs
                .map(
                  (e) => Tab(
                        text: e,
                      ),
                )
                .toList(),
            isScrollable: true,
          ),
          title: Text('flow'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: tabs.map(
            (e) {
              // var changeColor = e.hashCode ~/ 1234567;
              // changeColor ~/= 100;

              if (e.hashCode != null) {
                print(e.hashCode);
                return Container(
                  alignment: Alignment.center,
                  width: 80.0,
                  height: 80.0,
                  color: Color(e.hashCode),
                );
              } else {
                return Container(
                  alignment: Alignment.center,
                  width: 300.0,
                  height: 300.0,
                  color: Colors.red,
                );
              }
            },
          ).toList(),
          // changeColor *= 100;

          // print(changeColor);
        ),
        // children: <Widget>[
        //   Container(
        //     width: 80.0,
        //     height: 80.0,
        //     color: Colors.deepOrange[600],
        //   ),
        //   Container(
        //     width: 80.0,
        //     height: 80.0,
        //     color: Colors.lightBlue[300],
        //   ),
        //   Container(
        //     width: 80.0,
        //     height: 80.0,
        //     color: Colors.deepOrange[200],
        //   ),
        //   Container(
        //     width: 80.0,
        //     height: 80.0,
        //     color: Colors.deepPurple[600],
        //   ),
        //   Container(
        //     width: 80.0,
        //     height: 80.0,
        //     color: Colors.yellow[600],
        //   ),
        //   Container(
        //     width: 80.0,
        //     height: 80.0,
        //     color: Colors.red[600],
        //   ),
        // ],
        // delegate: FlowLayoutDelegate(margin: EdgeInsets.all(10.0)),
      ),
    );
  }
}

class FlowDrawer extends StatelessWidget {
  const FlowDrawer({
    Key key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      child: MediaQuery.removePadding(
        removeTop: false,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 60.0),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ClipOval(
                      child: Image.asset(
                        'lib/devpics/a.jpg',
                        width: 80,
                      ),
                    ),
                  ),
                  Text('cat'),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: const Icon(Icons.add),
                    title: const Text('add  account'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('settings'),
                  )
                ],
              ),
            )
          ],
        ),
        context: context,
      ),
    );
  }
}

class FlowLayoutDelegate extends FlowDelegate {
  var margin = EdgeInsets.zero;

  FlowLayoutDelegate({this.margin});
  @override
  void paintChildren(FlowPaintingContext context) {
    // TODO: implement paintChildren

    var x = margin.left;
    var y = margin.top;

    //caclate every child position
    for (var i = 0; i < context.childCount; i++) {
      var w = context.getChildSize(i).width + x + margin.right;
      if (w < context.size.width) {
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
        x = w + margin.left;
      } else {
        x = margin.left;
        y += context.getChildSize(i).height + margin.top + margin.bottom;
        //paint child
        context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));

        x += context.getChildSize(i).width + margin.left + margin.right;
      }
    }
  }

  @override
  Size getSize(BoxConstraints constraints) {
    // TODO: implement getSize
    //size of flow
    return Size(double.infinity, 200.0);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    // TODO: implement shouldRepaint
    return oldDelegate != this;
  }
}
